<template>
	<view class="container">
		<uv-notify ref="notify"></uv-notify>
		<view class="user">
			<!-- 修改这里，将头像和用户名都放在一个子容器内 -->
			<view class="user-info">
				<view class="user-avatar">
					<template>
						<uv-avatar :text="user.username" fontSize="18" randomBgColor size="72px"></uv-avatar>
					</template>
				</view>
				<view class="user-username">
					<uv-text type="primary" :text="user.username" size="24" align="center"></uv-text>
				</view>
				<view>
					<uv-text type="primary" :text="user.userType" size="16" align="center"></uv-text>
				</view>
			</view>
		</view>
		<view class="set-menu">
			<view class="set-menu-c1">
				<view>
					<button class="button" @click="changePassword">修改密码</button>
				</view>
				<view>
					<button class="button-logout" style="margin-top: 20px;" @click="logout">退出登录</button>
				</view>
			</view>
		</view>
		
		


	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: '',
				apiUrl: '',
				firstChar: '',
				setToken: function() {},
				header: {},
				satoken: '',
			};
		},
		mounted() {
			this.apiUrl = getApp().globalData.apiUrl;
			this.user = uni.getStorageSync('user');
			this.firstChar = this.username;
			this.setToken = getApp().globalData.setToken;
		},
		methods: {
			/* 注销成功提示 */
			logoutSuccess() {
				this.$refs.notify.success('退出成功');
			},
			logoutFail() {
				this.$refs.notify.error('退出失败');
			},
			/* 修改密码 */
			changePassword() {
				uni.navigateTo({
					url: '/pages/userCenter/changePassword'
				});
			},
			logout() {
				// 在这里执行退出登录的逻辑，例如清除登录状态、跳转到登录页面等
				const backendURL = this.apiUrl + "/bicycle/logout";
				let header = this.setToken();
				let satoken = header.satoken;
				uni.request({
					url: backendURL,
					method: 'GET',
					header: {
						'content-type': 'application/json' ,// 设置content-type为application/json
						'satoken': satoken
					},
					success: (res) => {
						console.log('成功', res);
						if (res.data.code == 500) {
							console.log(res.data.msg);
						}
						if (res.data.code == 200) {
							console.log("退出成功");
							/* 将token从本地变量删除 */
							// 1、首先在登录时，将tokenName和tokenValue一起本地删除，例如：
							uni.removeStorageSync('tokenName');
							uni.removeStorageSync('tokenValue');
							uni.removeStorageSync('user');
							/* 设置全局变量user */
							getApp().globalData.user.username = '';
							/* 显示注销成功提示 */
							this.logoutSuccess();
							/* 跳转页面 */
							setTimeout(function() {
								/* 使用navigateTo跳转到login里 */
								uni.navigateTo({
									url: '../../user/login',
								});
							}, 1000);
						}
						else {
							if(res.data.code == 500)
							{
								this.logoutFail();
								setTimeout(function() {
									/* 使用navigateTo跳转到login里 */
									uni.navigateTo({
										url: '../../user/login',
									});
								}, 1000);
							}
						}
					},
					fail: (res) => {
						console.log('错误', res);
						this.logoutFail();
					},
				});
			},
			/* 折叠面板方法 */
			open(e) {
				console.log('open', e)
			},
			close(e) {
				console.log('close', e)
			},
			change(e) {
				console.log('change', e)
			},
		}
	};
</script>

<style>
	.container {
		justify-content: center;
		align-items: center;
		overflow: auto;
		height: 100vh;
		display: flex;
		/* 使用 flex 布局 */
		flex-direction: column;
		transition: background .2s;
		background: linear-gradient(to bottom, #55AAFF, #76FAC7, #ffffff, #ffffff);
	}

	.user {
		flex-direction: column;
		border-radius: 10px;
		flex: 1;
		margin-bottom: 20px;
		padding: 2px 30px;
		width: 80%;
	}

	.user-info {
		/* 新增的样式，居中显示头像和用户名 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.user-avatar {
		margin-top: 50px;
		margin-bottom: 10px;
		/* 调整头像和用户名之间的间距 */
	}

	.user-username {
		width: 80%;

	}

	.set-menu {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.set-menu-c1{
		display: flex;
		flex-direction: column;
	}

	.set {
		width: 80%;
		flex-direction: column;
		background-color: transparent;
		border-radius: 10px;
		flex: 1;
		margin: 20px 10px;
		padding: 2px 30px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.button {
		/* background: linear-gradient(to top left, #55AAFF, #76FAC7); */
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #55AAFF, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}

	.button:after {
		border: none;
	}

	.button:hover {
		background-image: linear-gradient(to right, #F780A7, #76FAC7), linear-gradient(to top left, #55AAFF, #76FAC7);
		background-position: 100% 0;
	}
	.button-logout{
		border: 5px solid transparent;
		border-radius: 16px;
		background-clip: padding-box, border-box;
		background-origin: padding-box, border-box;
		background-image: linear-gradient(to left, #ff007f, #dc0064), linear-gradient(to top left,  #dc0064,#ffffff);
		background-size: 200%;
		color: white;
		border-radius: 10px;
		padding: 10px 20px;
		cursor: pointer;
		transition: background .3s;
	}
	.button-logout:hover {
		background-image: linear-gradient(to right, #ff007f, #B9004A), linear-gradient(to top left, #F780A7, #B9004A);
		background-position: 100% 0;
	}
</style>